<template xmlns:float="http://www.w3.org/1999/xhtml">
  <div>
    <div style="width: 1300px;height:20px;margin-left: 10%"><i class="fa fa-neuter "></i>北京
      <el-button  plain>切换城市</el-button>
      <div class="div2">我的吃了么 &nbsp;商家中心 &nbsp;吃了么规则</div>
    </div>
    <div style="width:1200px;height:60px;display: table;margin-left: 10%">
      <img style="display: table-cell" src="../assets/resturant.png" height="100px" width="100px"/>
      <div style="display: table-cell" class="resturant-container1">
        <ul>
          <li><a href="">首页</a></li>
          <li>店铺列表</li>
          <li><a href="">苗眼电影</a></li>
          <li><a href="">酒店/民宿</a></li>
          <li><el-input type="text" placeholder="搜索商家或地点" ></el-input></li>
          <li><el-button icon="el-icon-search" circle></el-button></li>
        </ul>
        <!--<el-row>
          <div style="display: table-cell">
            <a href="www.baidu.com">首页</a>
          </div>
          <div style="display: table-cell">&nbsp;&nbsp;&nbsp;&nbsp;店铺&nbsp;&nbsp;&nbsp;&nbsp;
          </div>
          <div style="display: table-cell">
            <el-input v-model="form.age"></el-input>
          </div>
          <div style="display: table-cell">
            <el-button icon="el-icon-search" circle></el-button>
          </div>
        </el-row>-->
      </div>
      <div style="display: table-cell" class="resturant-container2">
        <img src="../assets/touxiang.png">
        <a href="">登录/注册</a>
      </div>
    </div>
    <!--<div class="swiper-container">
      <div class="swiper-wrapper">
        <div class="swiper-slide">Slide 1</div>
        <div class="swiper-slide">Slide 2</div>
        <div class="swiper-slide">Slide 3</div>
      </div>
      &lt;!&ndash; 如果需要分页器 &ndash;&gt;
      <div class="swiper-pagination"></div>

      &lt;!&ndash; 如果需要导航按钮 &ndash;&gt;
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>

      &lt;!&ndash; 如果需要滚动条 &ndash;&gt;
      <div class="swiper-scrollbar"></div>
    </div>-->
    <el-row>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>首页</el-breadcrumb-item>
        <el-breadcrumb-item>寻找店铺</el-breadcrumb-item>
      </el-breadcrumb>
    </el-row>
    <!--<div class="block">
     <span class="demonstration"></span>-->
    <el-carousel :interval="4000" type="card" height="200px" >
      <el-carousel-item v-for="item in imagebox" :key="item.id">
        <img src="item.idView" class="image">
        <!--<h3 class="small">{{ item }}</h3>-->
      </el-carousel-item>
    </el-carousel>
    <div class="resturant-fire"><i class="fa fa-list"></i>店铺列表</div>
    <div class="resturant-objects">
      <a href="">
        <img src="../assets/huanmenji.png" width="300px" height="240px"/>大聪明黄焖鸡
      </a>
    </div>
    <div class="resturant-objects">
      <img src="../assets/lamian.png" width="300px" height="240px"/>
    </div>
    <div class="resturant-objects">
      <img src="../assets/bg1.jpg" width="300px" height="240px"/>
    </div>
    <div class="resturant-objects">
      <img src="../assets/bg1.jpg" width="300px" height="240px"/>
    </div>
    <div class="resturant-objects">
      <img src="../assets/bg1.jpg" width="300px" height="240px"/>
    </div>
    <hr width="80%"/>
    <div class="div3">
      <h3>用户帮助</h3>
      <a href="">申请退款<br></a>
      <a href="">常见问题<br></a>
      <a href="">用户协议<br></a>
      <a href="">隐私政策<br></a>
    </div>
    <div class="div3">
      <h3>公司信息</h3>
      <a href="">关于我们<br></a>
      <a href="">投资者联系<br></a>
      <a href="">加入我们<br></a>
      <a href="">保险经纪资质<br></a>
    </div>
    <div class="div3">
      <h3>吃了么服务</h3>
      <a href="">吃了么外卖<br></a>
      <a href="">吃了么酒店<br></a>
      <a href="">苗眼电影<br></a>
      <a href="">吃了么配送<br></a>
      <a href="">吃了么云<br></a>
      <a href="">大从点评<br></a>
    </div>
    <hr width="80%"/>
    <div style="margin-left: 10%">吃了么团购 chileme.com</div>
  </div>

  <!--</div>-->
</template>

<script>

  /*import Swiper from 'swiper'
  import 'swiper/package/css/swiper.min.css'*/

  export default {
    /*mounted(){
      var mySwiper = new Swiper ('.swiper-container', {
        direction: 'vertical', // 垂直切换选项
        loop: true, // 循环模式选项

        // 如果需要分页器
        pagination: {
          el: '.swiper-pagination',
        },

        // 如果需要前进后退按钮
        navigation: {
          nextEl: '.swiper-button-next',
          prevEl: '.swiper-button-prev',
        },

        // 如果需要滚动条
        scrollbar: {
          el: '.swiper-scrollbar',
        },
      })
    },*/
    name: "resturants",

    data() {
      return {
        form: {
          username: '',
          password: ''
        },
        imagebox: [
          {id: 0, idView: require('../assets/bg2.jpg')},
          {id: 1, idView: require('../assets/bg1.jpg')},
          {id: 2, idView: require('../assets/bg4.jpg')},
          {id: 3, idView: require('../assets/bg5.jpg')},
        ]
      }
    }
  }
</script>

<style scoped>

  .resturant-container1 {
    width: 1000px;
    height: 20px;
    font-size: 20px;
    color: red;
    /*margin-bottom: 20px;*/
    background-color: #ffffff;
    border: 10px;
    padding: 10px;
  }
  a{text-decoration:none
  }

  .resturant-container2 {
    text-align:center;
    width: 100px;
    height: 40px;
    font-size: 15px;
    margin-top: 15px;
    color: darkorange;
    background-color: #ffffff;
    padding: 10px;
  }
  ul{ list-style-type: none;
    float:left}
  li{
    float: left;
    padding:10px;
  }
  .div2{
    float: right;
  }
  .div3{
    width: 100px;
    margin-left: 10%;
    float:left;
  }

  .resturant-objects {
    float: left;
    width: 300px;
    height: 300px;
    margin-left: 20px;
    padding: 20px;
    text-align: center;
  }

  .resturant-fire {
    color: dodgerblue;
    font-size: 30px;
  }

  .el-carousel__item h3 {
    color: #475669;
    font-size: 14px;
    opacity: 0.75;
    line-height: 250px;
    margin: 0;
  }

  .el-carousel__item:nth-child(2n) {
    background-color: #99a9bf;
  }

  .el-carousel__item:nth-child(2n+1) {
    background-color: #d3dce6;
  }

</style>
